<template>
  <transition name="home">
    <div class="home">
      <div class="head">
        <div class="img">
          <img src="https://sct.mykj2020.com/static/logo.png" alt="" />
        </div>
        <div class="dec">
          <p>外卖试吃福利团</p>
          <p>每天点外卖，先看试吃团</p>
        </div>
      </div>

      <!-- 主体 -->
      <div
        class="
          main
          md-example-child
          md-example-child-scroll-view
          md-example-child-scroll-view-3
        "
      >
        <md-scroll-view
          ref="scrollView"
          :scrolling-x="false"
          @end-reached="add"
          auto-reflow
        >
          <!--     
      <div
        v-for="i in list"
        :key="i"
        class="scroll-view-list"
      >
        <p class="scroll-view-item">{{i}}</p>
      </div> -->

          <!-- 地图 -->
          <div class="box" @click="$router.push('/map')">
            <div class="address">
              <i class="iconfont icon-dizhi"></i>
              <p>{{ $store.state.dataadr }}</p>
            </div>
          </div>
          <!-- 走马灯 -->
          <div class="contend content">
            <div class="block">
              <el-carousel height="150px" :interval="6000">
                <el-carousel-item v-for="(item, idex) in img" :key="idex">
                  <img :src="item" width="100%" height="100%" />
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
          <!-- 4个小列表 -->
          <div class="list">
            <ul>
              <li v-for="(i, idx) of $store.state.arr" :key="idx">{{ i }}</li>
            </ul>
          </div>

          <!-- 领劵 -->
          <div class="card">
            <div @click="$router.push({name:'meituan'})">
              <img
                src="https://sct.mykj2020.com/static/images/icon/mt_img.png"
                width="100%"
                alt=""
              />
            </div>
            <div  @click="$router.push({name:'elm'})">
              <img
                src="https://sct.mykj2020.com/static/images/icon/elm_img.png"
                height="100%"
                alt=""
              />
            </div>
          </div>

          <!-- 入驻.问题,订单 -->
          <div class="live">
            <div class="one" @click="$router.push({ name: 'add' })">
              <p>
                <img
                  src="https://sct.mykj2020.com/static/images/icon/stores_icon.png"
                  alt=""
                />
              </p>
              <p>商家入驻</p>
            </div>
            <div class="one"   @click="$toast.info('该选项玩命开发中',3000)">
              <p>
                <img
                  src="https://sct.mykj2020.com/static/images/icon/help_icon.png"
                  alt=""
                />
              </p>
              <p>常见问题</p>
            </div>
            <div class="one"  @click="$router.push({ name: 'order' })">
              <p>
                <img
                  src="https://sct.mykj2020.com/static/images/icon/order_icon.png"
                  alt=""
                />
              </p>
              <p>我的订单</p>
            </div>
          </div>

          <!-- 列表 -->
          <div class="shop">
            <ul>
              <li class="content" v-for="(i, idx) of shoparr" :key="idx"   @click=" $router.push({
                        name: 'detial',
                        query: {
                          id: i.id,
                        },
                      })
                    ">
                <div class="top">
                  <div class="left">
                    <img :src="i.img" width="100%" height="100%" alt="" />
                  </div>
                  <div class="mid">
                    <p>{{ i.name }}</p>
                    <p>
                      <span>{{ i.time }}</span
                      ><span>今天还有{{ i.num }}份</span>
                    </p>
                    <p>
                      该店距离你<span class="iconfont icon-fanhui"></span>1000m
                    </p>
                  </div>
                  <div
                    class="right"
                   
                  >
                    抢名额
                  </div>
                </div>
                <div class="bot">
                  <p>
                    <img
                      src="https://sct.mykj2020.com/static/images/icon/mt_logo.png"
                      alt=""
                    />
                  </p>
                  <p>试吃后，提交资料领取￥<span>30</span>餐补红包</p>
                </div>
              </li>
            </ul>
          </div>

          <md-scroll-view-more
            slot="more"
            loading-text="别急啊,正在加载中..."
            finished-text="拼了老命加载完了"
            :is-finished="isFinished"
          >
          </md-scroll-view-more>
        </md-scroll-view>
      </div>

      <div class="foot">
        <div
          v-for="(i, idx) of current"
          :key="idx"
          @click="change(idx)"
          :class="{ active: idx == m }"
        >
          <i :class="i.icon"></i>
          <p>{{ i.tit }}</p>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>

import { addClient, query } from "@/apis/client";
export default {
  name: "Home",
 
  data() {
    return {
      a: " 我是主页6",
      img: [
        " https://image.mykj2020.com/2021/11/1/1635740683122.jpg",
        "https://image.mykj2020.com/2021/2/25/1614239232198.jpg",
        "https://image.mykj2020.com/2021/12/17/1639717761321.jpg",
      ],
      shoparr: [],
      list: 10,
      isFinished: false,
      page: 0,
      all: 0,
      m: 0,
      current: [
        { tit: "首页", icon: "iconfont icon-shouye" },
        { tit: "淘宝特价", icon: "iconfont icon-taobaotese" },
        { tit: "我的", icon: "iconfont icon-wode" },
      ],
    };
  },
  activated() {

    //经纬度查询出来的店铺

    if(this.$store.state.dataadr ) {
      this.kof()
    }else{
       this.shoparr=[]
      this.page=0
      this.add();
    }

    this.m=0
    console.log('激活');
    //  
  },
  mounted() {
    console.log('挂载');
    this.$store.state.dataadr=''

    //  if(this.$store.state.dataadr ) {
    //   this.kof()
    // }else{
    //     this.add();
    // }
    // this.add();

  
  },
  methods: {
    async kof() {
      // console.log(this.$route.query);
      let res = await query(this.$route.query);
      console.log(res, "我是经纬度查询结果");

      
      if (!res.success) return;
      if (!res.data[0]) {
        this.$toast.info("选地点永泰或小新塘或体育中心有商家", 5000);
        this.shoparr=[]
        return 
      }
      this.shoparr=res.data
      this.isFinished=true
    },
    fn1(id) {
     
    },
    change(idx) {
      console.log(idx);
      this.m = idx;
      if (idx==1) {
         this.$router.push({name:'taobao'})
      }
       if (idx==2) {
        this.$router.push({name:'wode'})
      }
    },

    //获取所有数据
    async add() {
      // if (this.isFinished) {
      //   return
      // }
      // console.log(this.$store.state.dataadr,'是否为空');
      if(this.$store.state.dataadr){
        
          return 
      }
      
      this.page++;
    // console.log(this.page);
      let res = await addClient({
        page: this.page,
      });
      // console.log(res,'我是所有数据');
      this.all = res.all;
      if (this.page > Math.ceil(this.all / 2)) {
        return (this.isFinished = true);
      }
     
      res.data.forEach((element) => {
         
        this.shoparr.push(element);
      });

      this.$refs.scrollView.finishLoadMore();
    },
  },
};
</script>


<style lang="scss" scoped>
.home-enter-active,
.home-leave-active {
  transition: all .3s;
}
.home-leave {
  opacity: 1;
}
.home-leave-to {
  opacity: 0;
}

.home {
  height: 100%;
  display: flex;
  width: 100%;

  box-sizing: border-box;
  flex-direction: column;
  color: rgb(29, 27, 27);

  .head {
    height: 150px;
    background: white;
    display: flex;
    font-size: 42px;
    width: 100%;
    .img {
      width: 140px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
      img {
        width: 80%;
        height: 80%;
      }
    }
    .dec {
      font-size: 38px;
      margin-top: 24px;
      & > p:nth-of-type(2) {
        color: #9f9f9f;
      }
    }
  }
  .main {
    height: 0;
    flex-grow: 1;
    // overflow: auto;

    background: #f0f2fa;
    box-sizing: border-box;
    ::v-deep .md-scroll-view-more {
      font-size: 22px;
    }
    .box {
      .address {
        height: 90px;
        line-height: 90px;
        display: flex;
        font-size: 20px;
        background: white;
      }
    }
    .contend {
      height: 400px;

      border-radius: 15px;
      overflow: hidden;
      ::v-deep .el-carousel__indicators--horizontal {
        bottom: 20px;
        .el-carousel__button {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: rgb(148, 49, 49);
        }
      }
    }
    .list {
      ul {
        padding: 0 15px;
        display: flex;
        justify-content: space-around;
        line-height: 120px;
        font-size: 40px;
      }
    }
    .card {
      height: 206px;

      display: flex;
      padding: 80px 40px 0;
      justify-content: space-between;
      & > div {
        width: 472px;
        height: 100%;
      }
    }
    .live {
      display: flex;
      justify-content: space-between;
      padding: 0 96px;
      margin-top: 30px;
      .one {
        width: 150px;
        height: 190px;
        font-size: 32px;
        & > p:nth-of-type(1) {
          height: 140px;
          width: 100%;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .shop {
      ul {
        background: #f0f2fa;
        li {
          height: 344px;
          background: white;
          margin-top: 50px;
          border-radius: 30px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          padding: 20px;
          box-sizing: border-box;
          .top {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            .left {
              width: 214px;
              height: 214px;
            }
            .mid {
              flex: 1;
              height: 100%;
              padding-left: 36px;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              & > p:nth-of-type(1) {
                font-weight: bold;
              }
              & > p:nth-of-type(2) {
                font-size: 26px;
                color: red;
                span {
                  margin-right: 28px;
                }
              }
              & > p:nth-of-type(3) {
                font-size: 20px;
                letter-spacing: 4px;
                span {
                  font-size: 16px;
                  margin-right: -10px;
                }
              }
            }
            .right {
              width: 170px;
              height: 84px;
              line-height: 84px;
              text-align: center;
              border-radius: 38px;
              background: #fd051b;
              color: white;
              font-size: 20px;
            }
          }
          .bot {
            display: flex;
            font-size: 26px;
            align-items: center;
            margin-top: 10px;
            & > p:nth-of-type(1) {
              width: 56px;
              height: 56px;
              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }
            & > p:nth-of-type(2) {
              margin-left: 20px;
            }
          }
        }
      }
    }
  }
  .foot {
    height: 140px;

    display: flex;
    justify-content: space-around;
    background: white;
    align-items: center;
    .active {
      color: red;
    }
    & > div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      align-items: center;
      & > i {
        font-size: 66px;
      }
      & > p {
        font-size: 20px;
      }
    }
  }
}
</style>
